<template>
  <div>
      <el-row class="menu-row">
          <el-col :span="3"><el-button type="primary" icon="el-icon-plus" @click="addMenu(this.menuForm.id)">添加父级菜单</el-button></el-col>
      </el-row>
    <el-card>
    <el-table :data="menu" show-checkbox row-key="id"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="名称"   prop="name"></el-table-column>
      <el-table-column label="排序号" prop="orderNo"></el-table-column>
      <el-table-column label="路径"   prop="url">
      </el-table-column>
      <el-table-column label="操作" width="350">
          <template #default="scope">
            <el-button type="text" @click="addMenu(scope.row.id)" v-show="scope.row.parentId == 0">添加下级菜单</el-button>
            <el-button type="text" @click="editMenu(scope.row)">修改</el-button>
            <el-button type="text" @click="deleteMenu(scope.row.id)">删除</el-button>
          </template>
      </el-table-column>
    </el-table>

    </el-card>


    <el-dialog
      :title="this.menuDialogForm.id?'修改菜单':'新增菜单'"
      v-model="dialogVisible"
      width="70%"
    >
      <el-form :model="menuDialogForm" :rules="menuRules" ref="dialogForm" label-width="100px">
        <el-form-item label="路径" prop="url">
          <el-input v-model="menuDialogForm.url"></el-input>
        </el-form-item>
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="menuDialogForm.name"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="menuDialogForm.icon"></el-input>
        </el-form-item>
        <el-form-item label="排序号" prop="orderNo">
          <el-input v-model="menuDialogForm.orderNo"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="menuDialogForm.type" placeholder="请选择类型">
            <el-option value="">请选择</el-option>
            <el-option :value="1" label="菜单">菜单</el-option>
            <el-option :value="2" label="按钮">按钮</el-option>
          </el-select>
        </el-form-item>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="sumbit('dialogForm')">确定</el-button>
      </el-form>
    </el-dialog>
</div>
</template>

<script>
export default {
  name: "Menu",
  data() {
    return {
      menu: [],//菜单
      menuForm: {
        id: null,
      },
      dialogVisible: false,
      menuDialogForm: {
        id: null,
        parentId: null,
        url: '',
        name: '',
        icon: '',
        orderNo: null,//排序号
        type: null,//类型1.菜单 2.按钮
      },
      menuRules: {
        name: [
          {required: true, message: '请输入菜单名称', trigger: 'blur'},
        ],
        orderNo: [
          {required: true, message: '请输入排序号', trigger: 'blur'},
        ],
        type: [
          {required: true, message: '请输入类型', trigger: 'blur'},
        ],
      }
    }
  },
  created() {
  this.getMenu();
    },
  methods: {
    //获取菜单
    getMenu() {
      let _this = this;
      var par = {
        category: 0
      }
      _this.$api.system.getMenuList(par).then(res => {
        if (res.data.code === 200){
        _this.menu = res.data.data
        }else return _this.$message.error('错误')
      })
    },
    //添加菜单
    addMenu(val) {
      this.dialogVisible = true;
      if (val){
        this.menuDialogForm = {
          parentId: val
        }
        //console.log(this.menuDialogForm.parentId,'添加子级菜单');
      }else {
        this.menuDialogForm.parentId = 0;
        //console.log(this.menuDialogForm.parentId, '添加父级菜单');
      }
    },
    //修改菜单
    editMenu(val) {
      this.menuDialogForm = val;
      console.log(this.menuDialogForm);
      //this.$api.system.geteditMenu().then().catch();
      this.dialogVisible = true;
    },
    //添加以及修改中的提交按钮
    sumbit(Form) {
      this.$refs[Form].validate(valid => {
          if (valid){
            let id = this.menuDialogForm.id;
            //console.log(id);
            if (id){
              //修改
              //console.log('查看修改传的参数=', this.menuDialogForm)
              this.$api.system.geteditMenu(this.menuDialogForm).then( res => {
                if (res.status == 200){
                  this.$message.success('修改成功');
                  this.getMenu();
                  this.dialogVisible = false;
                }else this.$message.error(res.message)
              }).catch(err => {this.$message.error('修改失败！！！！')});
            }else {
              //添加
              console.log(this.menuDialogForm);

              this.$api.system.getAddMenu(this.menuDialogForm).then(res => {
                if (res.status == 200){
                  this.$message.success('添加成功');
                  this.getMenu();
                  this.dialogVisible = false;
                }else this.$message.error(res.message);
              }).catch(err => {return this.$message.error('添加失败！！！！')});
            }
          }
      })
    },
    cancel() {
      this.menuDialogForm = {};
      this.dialogVisible = false;
    },
    //删除
     deleteMenu(val) {
       this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let _this = this;
        let  par ={id:val}
        _this.$api.system.getDeleteMenu(val,par).then(res => {
          console.log(res)
          if (res.status === 200){
            this.$message.success('删除成功')
            _this.getMenu();
          }else
          {
            this.$message.error('删除失败')
            _this.getMenu();
          }
            }).catch(err => {this.$message.error('删除错误，请检查')})
      }).catch(() => {
         this.$message.success('取消删除成功');
      })
    },
}
}
</script>

<style scoped>
.menu-row{
  margin: 15px;
}
</style>